<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>便利店</h3>
			<h5>商品分类</h5>
			<h4>分类修改</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="ware-add">
				<form action="#" class="layui-form ware-add-form buyer-form">
					<dl>
					    <dt>等级名称：<i class="must">*</i></dt>
					    <dd><input type="text" name="level_name" lay-verify="required" lay-verType="tips" placeholder="请输入等级名称" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>成长值：<i class="must">*</i></dt>
					    <dd><input type="number" name="growth" lay-verify="required" lay-verType="tips" placeholder="请设置商品的成长值" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				   	<dl>
					    <dt>添加商品：<i class="must">*</i></dt>
				  		<dd class="marke-input-img"><input type="text" placeholder="图片尺寸 200*200" class="marke-img layui-input layui-disabled" disabled value=""/><span id="pay">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span><br /><code>建议上传尺寸200*200</code></dd>
			  		</dl>
					<div class="buyer-oil">油品优惠：</div>
				    <dl>
					    <dt>国四5#柴油1号枪：</dt>
					    <dd><input type="number" name="212" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国五92#汽油2号枪：</dt>
					    <dd><input type="number" name="173" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国四93#汽油2258号枪：</dt>
					    <dd><input type="number" name="226" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国六95#汽油3号枪：</dt>
					    <dd><input type="number" name="208" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国五92#汽油4号枪：</dt>
					    <dd><input type="number" name="191" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国四5#柴油4435号枪：</dt>
					    <dd><input type="number" name="228" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl><dl>
					    <dt>国六98#汽油5号枪：</dt>
					    <dd><input type="number" name="209" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
				    <dl>
					    <dt>国四0#汽油5584号枪：</dt>
					    <dd><input type="number" name="cate_name" placeholder="请输入油品优惠价格" autocomplete="off" class="layui-input ware-add-tit"></dd>
				    </dl>
					<button class="submit" lay-submit lay-filter="Submit" >提交</button>
				</form>
			</div>
		</div>
		<!--/deer-content-->
	</section>
	
	<!--js-->
	<aside>
		
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			
			layui.use(['form','jquery','upload'],function(){
				var	form=layui.form;
				var $=layui.jquery;
				var upload=layui.upload
				
				//图片上传
				upload.render({
				    elem: '#ware-drag'
				    ,url: '/'
				    ,size:2000
				    ,done: function(res){
				      console.log(res)
				    }
				})
				
				
				//表单提交
				form.on('submit(Submit)', function(data){
					console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					
					$.ajax({
			            url: '/',
			            data: data.field,
			            type: 'post',
			            datatype: 'json',
			            success: function (res) {
				                if (res.code == 1) {
				                	
				                	layer.msg(res.msg);
				                    return;
				                }
				            }
				        });
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
				
				 //图片上传
		        upload.render({
				    elem: '#pay' //绑定元素
				    ,url: 'https://api-develop.zhihuiyouzhan.com.cn/index.php/system/upload/upload?path=merchant.usercard&token={:get_api_token()}' //上传接口
				    ,done: function(res){
				      //上传完毕回调
				      if(res.code==0){
				      	$('.marke-img').eq(0).val(res.data.domain+res.data.list[0])
				      }else{
				      	layer.msg(res.msg,{icon: 2})
				      }
				      
				    }
				    ,error: function(){
				      //请求异常回调
				       layer.msg('数据请求异常',{icon: 2})
				    }
				 });
				 
				  //预览
		        $('.imgview').click(function () {
		        	var img=$(this).parent().find('.marke-img')
			        var imgVal =img.val()
			        if(imgVal == '') {
			        	layer.msg('没有图片可以预览',{icon:2})
			        	return false;
			        }
			        var imgView = "<img style='width:100%;height:100%' src="+imgVal+">";
			        	layer.open({
				            title: '图片预览',
				            area:'750px',
				            content: imgView,
				            shadeClose:true
			       		 });
		   		 })	
		        //删除
		         $('.imgdel').click(function () {
		         	var img=$(this).parent().find('.marke-img')
		       		 if( img.val()==''){
		       		 		layer.msg('没有图片可以删除',{icon:2})
		       		 }else{
		       		 		img.val('')
		       		 }
		    	});

				
				
				
			})
			
		</script>
		
		
		
	</aside>
	<!--/js-->
</body>
</html>